<template>
  <div class="departments-container">
    <div class="app-container">

      <el-card v-loading.lock="isLoading" class="tree-card">
        <el-tabs value="first" class="tree-card-header">
          <el-tab-pane label="用户管理" name="first" />
        </el-tabs>

        <div class="tree-card-body">
          <!-- 用了一个行列布局 -->
          <!-- 显示公司那一栏的代码 -->
          <!-- 引入封装的组件 -->
          <TreeTools :node-data="{name:'XXX责任有限公司', manager:'负责人'}" :data="departs" class="aaa">
            <!-- 插槽 -->
            <!-- <el-dropdown-item @click.native="addDepartment(data)">添加子部门</el-dropdown-item> -->
          </TreeTools>
          <!-- 传 is-compony 过去的目的是为了：如果是公司这一栏，则隐藏“删除”和“修改” -->
          <!-- <TreeTools :node-data="{name:'XXX责任有限公司', manager:'负责人'}" :is-compony="false" /> -->

          <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /> -->
          <!-- 显示公司那一栏往下的代码 -->
          <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
            <!-- { data } 就是 departs 里面的内容 -->
            <!-- 作用域插槽，为了使用 el-tree 里面的 data 数据，因为 departs 用 data 的名字传给了 el-tree -->
            <template #default="{data}">
              <!-- 引入封装的组件 -->
              <TreeTools :node-data="data">
                <!-- 插槽 -->
                <el-dropdown-item @click.native="openDialogForAdd(data)">添加子部门</el-dropdown-item>
                <el-dropdown-item @click.native="openDialogForEdit(data)">编辑部门</el-dropdown-item>
                <el-dropdown-item @click.native="delDepartment(data)">删除部门</el-dropdown-item>
              </TreeTools>
              <!-- <TreeTools :node-data="data" /> -->
            </template>
          </el-tree>
        </div>
      </el-card>

      <!-- 添加子部门弹框组件 -->
      <!-- 添加上 .sync 可以让子组件修改父组件的值，不用回传通知父组件 -->
      <AddDepartments
        :is-add.sync="isAdd"
        :father-data="fatherData"
        :original-departs="originalDeparts"
        @closeDialog="closeDialog"
        @getCompanyDataRequestResult="getCompanyDataRequestResult"
      />

      <!-- 修改子部门弹框组件 -->
      <EditDepartments
        :is-edit.sync="isEdit"
        :father-data="fatherData"
        :original-departs="originalDeparts"
        @closeDialog="closeDialog"
        @getCompanyDataRequestResult="getCompanyDataRequestResult"
      />
    </div>
  </div>
</template>

<script>
// 引入封装的 tree-tools 组件
import TreeTools from './components/tree-tools.vue'
// 引入封装的请求部门列表的请求
import { getCompanyDataRequest, delDepartmentRequest } from '@/api/departments'
// 引入封装的递归方法：
import { tranListToTreeData } from '@/utils/index'
// 引入封装的添加子部门弹框组件：
import AddDepartments from './components/add-departments.vue'
// 引入封装的修改子部门弹框组件：
import EditDepartments from './components/edit-departments.vue'

export default {
  name: 'Departments',

  components: {
    TreeTools,
    AddDepartments,
    EditDepartments
  },

  data() {
    return {
      // 存放树形数据
      departs: [],
      // 因为 el-tree 里面只认识 lebel 和 children ，如果后端返回的数据不是这俩名字，则需要我们自己改名，elementUI 提供了方法
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 添加子部门所显示的弹框
      isAdd: false,
      // 修改部门所显示的弹框
      isEdit: false,
      // 点击添加时，携带参数去子组件，方便获取数据
      fatherData: {},
      // 存放原生数据，不存放树形数据，仅供添加子部门时，传给子组件的值，方便参考查找：
      originalDeparts: [],
      // 加载效果
      isLoading: false
    }
  },

  created() {
    this.getCompanyDataRequestResult()
  },
  methods: {
    // 请求部门列表
    async getCompanyDataRequestResult() {
      // 加载效果显示
      this.isLoading = true
      // 发起请求获取总列表
      const { data } = await getCompanyDataRequest()
      // 递归方法解决树形结构
      this.departs = tranListToTreeData(data.depts, '')
      // 存放原生数据，不存放树形数据，仅供添加子部门时，传给子组件的值，方便参考查找：
      this.originalDeparts = data.depts
      // 加载效果取消
      this.isLoading = false
      /*
      // 获取父部门（pid === ''）
      const newListFather = data.depts.filter(item => item.pid === '')
      // 获取子部门（pid !== ''）
      const newListSon = data.depts.filter(item => item.pid !== '')
      // 遍历父部门，若子部门的 pid 等于父部门的 id，则将该子部门添加到父部门的 children 中，若找不到匹配的，则 children 的值为 []
      // 将所得的最终部门数据（父部门包含子部门）返回到 this.departs
      this.departs = newListFather.map(item => {
        // item.children = []
        // newListSon.forEach(element => {
        //   if (element.pid === item.id) {
        //     item.children.push(element)
        //   }
        // })

        // 下面这一行是上面几行的精简代码
        item.children = newListSon.filter(element => element.pid === item.id) || []
        return item
      })
      */
    },
    // 打开弹框
    openDialogForAdd(data) {
      // 弹框打开
      this.isAdd = true
      // 一打开弹框的同时，被点击的部门数据就被传到子组件，方便子组件查看
      this.fatherData = data
    },
    openDialogForEdit(data) {
      // 弹框打开
      this.isEdit = true
      // 一打开弹框的同时，被点击的部门数据就被传到子组件，方便子组件查看
      this.fatherData = data
    },
    // 关闭添加子部门时的弹框（已经可以在弹框组件中修改该值，这个方法可以不要了）
    closeDialog() {
      this.isAdd = false
    },

    // // 编辑子部门
    // editDepartment() {
    //   console.log('edit')
    // },

    // 删除子部门
    delDepartment(data) {
      // elementUI 里提供的提示方法：
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用删除：
        await delDepartmentRequest(data.id)
        this.$message.success('删除成功!')
        // 重新渲染页面：
        this.getCompanyDataRequestResult()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  font-size:14px;
}
.tree-card-header{
  padding: 30px 40px 0 30px;
}
.tree-card-body{
  padding: 30px 140px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
// ::v-deep .aaa{
//   // margin:0 50px
// }
</style>
